<!-- 热点检索页-高级搜索表单 -->
<template>
  <div class="high-search-form">
    <a-popover
      placement="bottom"
      :visible="popoverVisible"
      trigger="click"
      @visibleChange="handleVisibleChange"
      class="popover"
    >
      <template slot="content">
        <div class="popover-header">
          <span class="popover-title">高级检索</span>
        </div>

        <div class="popover-content">
          <a-form-model
            ref="form"
            :model="searchForm"
            :rules="rules"
            v-bind="formLayout"
            class="search-form"
            :colon="false"
          >
            <a-form-model-item label="时间范围">
              <div style="display: inline">
                <a-radio-group
                  v-model="searchForm.cycleType"
                  name="radioGroup"
                  @change="handleChange"
                >
                  <a-radio value="week">近一周</a-radio>
                  <a-radio value="month">近一月</a-radio>
                  <a-radio value="halfYear">近半年</a-radio>
                  <a-radio value="defined">自定义</a-radio>
                </a-radio-group>
                <!-- 如果是自定义，显示日期插件 -->
                <a-range-picker
                  v-if="searchForm.cycleType == 'defined'"
                  v-model="searchForm.ranges"
                  @change="onChange"
                  separator="至"
                />
              </div>
            </a-form-model-item>
            <a-form-model-item label="区域">
              <div style="width: 100%">
                <div>
                  <a-checkbox
                    :checked="checkRegionAll"
                    @change="(e) =>onCheckAllChange('region', e)"
                  >全部</a-checkbox>
                </div>
                <div
                  class="checkbox-group-region"
                  style="display: flex;  flexDirection:column; alignItems: flex-start"
                >
                  <template>
                    <div style="display: flex; marginTop: 26px">
                      <!-- 省份列表 -->
                      <div style="width: 106px; display: flex;  flexDirection:column;">
                        <a-checkbox-group
                          v-model="searchForm.provinceList"
                          :disabled="checkRegionAll"
                          @change="(checkedList) => onCheckChange('province', checkedList)"
                        >
                          <a-checkbox
                            v-for="(group, index) in regionOptions"
                            :key="index"
                            :value="group.province"
                            :checked="group.checked"
                            :style="{height: ((Math.ceil(group.cityList.length/7) ) * 52) + 'px', marginLeft: '0px'}"
                          >{{group.province}}</a-checkbox>
                        </a-checkbox-group>
                      </div>

                      <div style="width: 855px ;display: flex;  flexDirection:column;">
                        <!-- 城市列表 -->
                        <a-checkbox-group
                          v-model="group.checkedCities"
                          v-for="(group, index) in regionOptions"
                          :key="index"
                          :disabled="checkRegionAll || group.disabled"
                          :options="group.cityList"
                          @change="(checkedList) => onCheckChange('city', checkedList, index)"
                        />
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="类别">
              <div>
                <div>
                  <a-checkbox :checked="checkTypeAll" @change="(e) =>onCheckAllChange('type', e)">全部</a-checkbox>
                </div>
                <div class="checkbox-group-type" style="display: flex; flexDirection: column">
                  <a-checkbox-group
                    style="width: 50%"
                    v-model="searchForm.typeList"
                    :disabled="checkTypeAll"
                    :options="typeOptions"
                    @change="(checkedList) => onCheckChange('type', checkedList)"
                  />
                </div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="渠道">
              <div>
                <div>
                  <a-checkbox
                    :checked="checkChannelAll"
                    @change="(e) =>onCheckAllChange('channel', e)"
                  >全部</a-checkbox>
                </div>
                <div class="checkbox-group-channel">
                  <a-checkbox-group
                    v-model="searchForm.channelList"
                    :disabled="checkChannelAll"
                    :options="channelOptions"
                    @change="(checkedList) => onCheckChange('channel', checkedList)"
                  />
                </div>
              </div>
            </a-form-model-item>
          </a-form-model>
        </div>
        <div class="popover-footer">
          <a-button class="submit-btn" type="primary" @click="submitSearchForm('searchForm')">确定</a-button>
          <a-button class="close-btn" @click="resetSearchForm()">重置</a-button>
        </div>
      </template>
    </a-popover>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {
    popoverVisible: {
      type: Boolean,
      default: false,
    },
    visibleChange: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      regionOptions: [
        {
          province: "安徽省",
          cityList: [
            "合肥市",
            "芜湖市",
            "蚌埠市",
            "淮南市",
            "马鞍山市",
            "淮北市",
            "铜陵市",
            "黄山市",
            "宿州市",
            "阜阳市",
            "瀚州市",
            "六安市",
            "宣城市",
            "池州市",
            "毫州市",
          ],
        },
        {
          province: "贵州省",
          cityList: [
            "贵阳市",
            "遵义市",
            "六盘水市",
            "安顺市",
            "毕节市",
            "铜仁市",
            "黔东南",
            "黔南",
            "黔西南",
          ],
        },
        {
          province: "河北省",
          cityList: ["石家庄市", "衡水市", "沧州市", "邯郸市"],
        },
        {
          province: "辽宁省",
          cityList: ["沈阳市", "大连市", "丹东市", "营口市"],
        },
      ],
      typeOptions: [
        "经济建设",
        "财经",
        "社会",
        "政治",
        "经1建设",
        "财2",
        "社2",
        "政2",
        "经济建3",
        "财3",
        "社3",
        "政3",
      ],
      channelOptions: ["官方门户", "官方媒体", "主流媒体", "自媒体"],
      //高级搜索表单
      formLayout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 22 },
      },
      rules: {},
      searchForm: {
        cycleType: "",
        ranges: [],
        cityList: [],
        provinceList: [],
        // regionList: [],
        typeList: [],
        channelList: [],
        inputData: "",
      },
      checkRegionAll: false,
      checkTypeAll: false,
      checkChannelAll: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "searchForm" });
  },
  mounted() {},
  methods: {
    handleVisibleChange() {
      this.$emit("visibleChange");
    },
    //集合change事件
    handleChange(e) {
      console.log("value:", e.target.value);
    },
    /**高级搜索表单开始 */
    //高级搜索气泡框change事件
    //1.时间范围选择：日期控件change事件
    onChange(dates, dateStrings) {
      console.log("From: ", dates[0], ", to: ", dates[1]);
      console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
    },
    //2.高级搜索复选框选择
    onCheckChange(type, checkedList, index) {
      Object.assign(this.searchForm, {
        cityList: [],
      });
      if (type == "province") {
        this.checkRegionAll = checkedList.length === this.regionOptions.length; //区域全部按钮状态
        if (this.checkRegionAll) {
          Object.assign(this.searchForm, {
            provinceList: [],
          });
          this.regionOptions.forEach((item) => {
            item.disabled = false;
          });
        } else {
          this.searchForm.provinceList = checkedList;

          this.regionOptions.forEach((item) => {
            if (checkedList.indexOf(item.province) !== -1) {
              item.disabled = true;
            } else {
              item.disabled = false;
            }
            item.checkedCities = [];
          });
        }
      } else if (type == "city") {
        //初始化所有选择城市列表checkedCities没被选择都为[]
        this.regionOptions.forEach((item) => {
          item.checkedCities = [];
        });
        if (this.checkRegionAll) {
          //如果区域全部按钮选中，则
          this.regionOptions[index].disabled = true; //1>所有城市置灰
          this.regionOptions[index].checkedCities = []; //2>并选择城市列表checkedCities清空
        } else {
          if (
            checkedList.length === this.regionOptions[index].cityList.length
          ) {
            //如果选择全部城市，则
            this.searchForm.provinceList.push(
              this.regionOptions[index].province
            ); //1>该省份被添入选择省份列表provinceList里并为选中状态
            this.regionOptions[index].disabled = true; //2>该省份下所有城市置灰
            this.regionOptions[index].checkedCities = []; //3>该省份下选择城市列表checkedCities清空
          } else {
            //选择某一或部分城市，则
            var key = this.searchForm.provinceList.indexOf(
              this.regionOptions[index].province
            ); //判断选择省份列表provinceList里是否包含选择城市所属的省份
            if (key > -1) {
              //包含值key为0，不包含值key为-1
              this.searchForm.provinceList.splice(key, 1); //1>选择省份列表provinceList删除包含的该省份
            }
            this.regionOptions[index].disabled = false; //2>该省份下所有城市清空置灰
            this.regionOptions[index].checkedCities = checkedList; //3>将选择的城市填入选择城市列表checkedCities里
          }
        }
      } else if (type == "type") {
        this.checkTypeAll = checkedList.length === this.typeOptions.length;
        if (this.checkTypeAll) {
          Object.assign(this.searchForm, {
            typeList: [],
          });
        } else {
          this.searchForm.typeList = checkedList;
        }
      } else if (type == "channel") {
        this.checkChannelAll =
          checkedList.length === this.channelOptions.length;
        if (this.checkChannelAll) {
          Object.assign(this.searchForm, {
            channelList: [],
          });
        } else {
          this.searchForm.channelList = checkedList;
        }
      }
      this.regionOptions.forEach((item) => {
        //将所有各省份的选择城市列表checkedCities都合并到筛选城市列表cityList里
        this.searchForm.cityList = this.searchForm.cityList.concat(
          item.checkedCities
        );
      });
      console.log("筛选的城市:", this.searchForm.cityList);
      console.log("筛选的省份:", this.searchForm.provinceList);
    },
    //高级搜索全部选择
    onCheckAllChange(type, e) {
      if (type == "region") {
        this.checkRegionAll = e.target.checked;
        if (this.checkRegionAll) {
          //如果区域全部按钮被选中
          /*1>清空选择省份列表provinceList */
          Object.assign(this.searchForm, {
            provinceList: [],
          });
          /*2>清空筛选城市列表cityList */
          Object.assign(this.searchForm, {
            cityList: [],
          });
          /*3>清空所有省份下选择城市列表checkedCities，并将城市列表都置灰 */
          this.regionOptions.forEach((item) => {
            item.disabled = false;
            item.checkedCities = [];
          });
        }
      } else if (type == "type") {
        Object.assign(this.searchForm, {
          typeList: [],
        });
        // this.searchForm.typeList = [];
        this.checkTypeAll = e.target.checked;
      } else if (type == "channel") {
        Object.assign(this.searchForm, {
          channelList: [],
        });
        this.checkChannelAll = e.target.checked;
      }
    },
    //高级搜索表单提交事件
    submitSearchForm(formName) {
      console.log("submit:", this.searchForm);
      this.$emit("visibleChange");
      this.$emit("searchFormData", this.searchForm);
    },
    // 重置表单
    resetSearchForm() {
      this.searchForm = {
        cycleType: "",
        ranges: [],
        cityList: [],
        provinceList: [],
        // regionList: [],
        typeList: [],
        channelList: [],
        inputData: "",
      };
      this.checkRegionAll = false;
      this.checkTypeAll = false;
      this.checkChannelAll = false;
      // this.$refs["form"].resetFields();
    },
    /**高级搜索表单结束 */
  },
};
</script>
<style lang='stylus' scoped>
.high-search-form
  width 1210px
.popover-header
  padding-top 18px
  padding-left 14px
  .popover-title
    padding-left 8px
    border-left 5px solid #4387F8
    font-size 16px
.popover-footer
  text-align center
  width 100%
  padding-bottom 20px
  .submit-btn
    width 76px
    height 34px
    margin 0px 30px
    border 1px solid #1678FD
    background #1678FD
  .close-btn
    width 76px
    height 34px
    margin 0px 30px
    border 1px solid #1678FD
    color #1678FD
.checkbox-group-type
  .ant-checkbox-group
    margin-top 26px
.checkbox-group-channel
  .ant-checkbox-group
    margin-top 26px
</style>